<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        <title><ui:insert name="title">PrimeFaces Sentinel</ui:insert></title>
        <h:outputScript library="sentinel-layout" name="js/login.js"/>
        <ui:insert name="head"/>
    </h:head>

    <h:body class="fontRegular login-back white-back">
        <h:outputStylesheet library="sentinel-layout" name="css/font-icon-layout.css"/>
        <h:outputStylesheet library="sentinel-layout" name="css/sentinel-layout.css"/>
        <h:outputStylesheet library="sentinel-layout" name="css/core-layout.css"/>

        <div class="Container80 MaxWid500 Fnone MarAuto TexAlCenter PaddingTopPercent10">
            <a href="" id="login-logo">
                <img src="#{resource['sentinel-layout:images/LOGO.svg']}" class="Fleft" />
                <span class="Fs30 FontTitilliumSemiBoldItalic Fleft">
                    <span class="softblue">SENTINEL</span><span class="hardblue">LAYOUT</span>
                </span>
            </a>
            <div class="EmptyBox10"/>
        </div>

        <!-- LOGIN BOX COVER START -->
        <div class="Container80 MaxWid500 white-back Fnone MarAuto BordRad10" id="login-box">
            <div class="Container">
                <div class="Container50 TexAlCenter Animated05 BoxSizeBorder TabBtn left TabBtnActiveLeft" role="1">
                    <div class="Container80 Fnone MarAuto FontBold"><i class="icon-lock"/> Login</div>
                </div>
                <div class="Container50 TexAlCenter Animated05 BoxSizeBorder TabBtn right" role="2">
                    <div class="Container80 Fnone MarAuto FontBold"><i class="icon-key-1"/> Permissions</div>
                </div>

                <div class="Container90 Fnone MarAuto TexAlCenter TabContent OvHidden" id="TAB1">
                    <div class="EmptyBox50"/>
                    <p:inputText placeholder="Username" styleClass="Container80 Fnone MarAuto Fs18"/>
                    <div class="EmptyBox10"/>
                    <p:password placeholder="Password" styleClass="Container80 Fnone MarAuto Fs18"/>
                    <div class="EmptyBox20"/>
                    <div class="Container85 Fnone MarAuto softgray">
                        <p:selectBooleanCheckbox itemLabel="I Accept Terms And Policies" styleClass="Fleft"/>
                    </div>
                    <div class="EmptyBox30"/>
                    <p:button value="Log In" outcome="/dashboard.xhtml" styleClass="Fs16"/>
                    <div class="EmptyBox50"/>
                </div>

                <div class="Container90 Fnone MarAuto DispNone TexAlCenter TabContent OvHidden" id="TAB2">
                    <div class="EmptyBox50"/>
                    <p:inputText placeholder="Your Email Address" styleClass="Container80 Fnone MarAuto Fs18" />
                    <div class="EmptyBox20"/>
                    <p:button value="Send Access Request" styleClass="Fs16"/>
                    <div class="EmptyBox50"/>
                </div>
            </div>
        </div>
        <!-- LOGIN BOX COVER END -->
    </h:body>
</html>
